<template>
  <div id="login-page">
    <div class="login-container">
      <div class="login-main">
        <div class="login-top">
          <span>爱购网登录</span>
          <span class="bg1"></span>
          <span class="bg2"></span>
        </div>
        <el-form class="login-bottom">
          <div class="center">
            <el-form-item>
              <el-input onfocus="this.style.borderColor='pink';"  onblur="this.style.borderColor='grey';" v-model="loginForm.username" auto-complete="off" placeholder="账号" type="text">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input onfocus="this.style.borderColor='pink';"  onblur="this.style.borderColor='grey';" v-model="loginForm.password" auto-complete="off" placeholder="密码" show-password
                        type="password">
              </el-input>
            </el-form-item>
          </div>
          <el-form-item style="width: 100%">
            <el-button class="login-btn" type="primary" @click="login">登录</el-button>
          </el-form-item>

        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        m: "login", username: "", password: "",
      },
      responseResult: [],
    };
  },
  methods: {
    login() {
      this.$http.post('/users', this.$qs.stringify(this.loginForm))
          .then(resp => {
            const {data} = resp
            //处理后台返回的结果
            console.log(data)
            if (data.data) {
              //保存用户信息
              localStorage.setItem("users", JSON.stringify(resp.data.data))
              this.$message({
                message: data.data.user_name + '登录成功',
                type: 'success'
              });
              this.$router.push({path: "/console"})
            } else {
              this.$message.error('登录失败,账户密码错误');
            }
          })

    }
  },
  mounted() {
  },
};
</script>


<style scoped>
#login-page {
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}


.login-container {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.login-main {
  width: 428px;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.login-top {
  height: 117px;
  background-color: pink;
  border-radius: 12px 12px 0 0;
  font-family: SourceHanSansCN-Regular;
  font-size: 30px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0;
  color: palevioletred;
  line-height: 117px;
  text-align: center;
  overflow: hidden;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}

.login-top .bg1 {
  display: inline-block;
  width: 74px;
  height: 74px;
  background: white;
  opacity: .1;
  border-radius: 0 74px 0 0;
  position: absolute;
  left: 0;
  top: 43px;
}

.login-top .bg2 {
  display: inline-block;
  width: 94px;
  height: 94px;
  background: white;
  opacity: .1;
  border-radius: 50%;
  position: absolute;
  right: -16px;
  top: -16px;
}


.login-main .login-bottom {
  width: 428px;
  background: white;
  border-radius: 0 0 12px 12px;
  padding-bottom: 30px;
}

.login-main .login-bottom .center {
  width: 288px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 15px;
  position: relative;
}


.login-main .login-bottom .login-btn {
  width: 280px;
  height: 40px;
  position: absolute;
  background-color: pink;
  border-radius: 16px;
  left: 50%;
  margin-left: -140px;
  text-align: center;
  color: palevioletred;
  font-size: 14px;
  letter-spacing: 0;
  cursor: pointer;
  border: none;
}
</style>